<!--
 * @Author: 小羊今晚不睡觉 2226764294@qq.com
 * @Date: 2025-09-25 13:17:42
 * @LastEditors: 小羊今晚不睡觉 2226764294@qq.com
 * @LastEditTime: 2025-10-09 16:08:57
 * @FilePath: \yougongxia-backstage\src\views\dashboard\console\components\VisiTab.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="mt-2">
    <div>
      <NRow :gutter="24">
        <NCol :span="24">
          <n-card content-style="padding: 20px 0 20px 0;" :bordered="false">
            <div>
              <div class="grid grid-cols-2 gap-2 mt-3">
                <FluxTrend :dayActiveLine="chartData[0]" />

                <VisitAmount :jobTotalBar="chartData[2]" />
              </div>
            </div>
          </n-card>

        </NCol>
      </NRow>
    </div>
    <div class="mt-2">
      <NRow :gutter="24">
        <NCol :span="24">
          <n-card content-style="padding: 20px 0 20px 0;" :bordered="false">
            <div>
              <FluxTrend2 :monthActiveLine="chartData[1]" />
            </div>
          </n-card>
        </NCol>
      </NRow>
    </div>
  </div>
</template>
<script lang="ts" setup>
import FluxTrend from './FluxTrend.vue';
import FluxTrend2 from './FluxTrend2.vue';
import VisitAmount from './VisitAmount.vue';
import { defineProps } from 'vue';

const props = defineProps({
  chartData: {
    type: Object,
    default: () => ({})
  }
});
</script>
